<template>
	<view style="height: 100%;">
		<uni-popup ref="popup" type="bottom">
			<view class="time1">
				<view style="display: flex;align-items: center;justify-content: space-between;" class="top">
					<text @tap="cancel">取消</text>
					<view
						style="flex:auto;justify-content: center;align-items: center;display: flex;font-size: 28rpx;color: #ee682e;font-weight: 400;">
						请选择配送时间</view>
					<text @tap="confirm" style="color: #FECF3C;font-weight: 400;">确定</text>
				</view>
				<picker-view class="picker" :value="defulatYmd" @change="getime" indicator-style="height:30px;">
					<picker-view-column>
						<view class="hours" style="line-height:30px; text-align: center;" v-for="(item,index) in ytd"
							:key="index">{{item}}</view>
					</picker-view-column>

					<picker-view-column>
						<view class="minutes" style="line-height:30px; text-align: center;"
							v-for="(item,index) in timeBucket" :key="index">{{item}}</view>
					</picker-view-column>

				</picker-view>
			</view>
		</uni-popup>
	</view>
</template>
<script>
	const getMonthLength = (date) => {
		let d = new Date(date)
		d.setMonth(d.getMonth() + 1)
		d.setDate('1')
		//获取本月最后一天
		d.setDate(d.getDate() - 1)
		return d.getDate()
	}

	const getYM = () => {
		let myDate = new Date()
		let myYear = myDate.getFullYear(); //获取完整的年份(4位,1970-????)
		let myMonth = myDate.getMonth() + 1; //获取当前月份(0-11,0代表1月)
		let myToday = myDate.getDate(); //获取当前日(1-31)
		myMonth = myMonth > 9 ? myMonth : '0' + myMonth
		myToday = myToday > 9 ? myToday : '0' + myToday
		let nowDate = myYear + "-" + myMonth
		return nowDate
	}
	const getNowYMT = () => {
		let myDate = new Date()
		let myYear = myDate.getFullYear(); //获取完整的年份(4位,1970-????)
		let myMonth = myDate.getMonth() + 1; //获取当前月份(0-11,0代表1月)
		let myToday = myDate.getDate(); //获取当前日(1-31)
		myMonth = myMonth > 9 ? myMonth : '0' + myMonth
		myToday = myToday > 9 ? myToday : '0' + myToday
		let nowDate = myYear + "-" + myMonth + "-" + myToday
		return myToday
	}
	export default {


		created() {

		},
		mounted() {
			this.init()
		},
		data() {
			return {
				selectTime: '',
				ytd: [], //年月日
				defulatYmd: [],
				timeBucket: [
					'09:00-11:00',
					'11:00-13:00',
					'13:00-15:00',
					'17:00-19:00',
					'19:00-21:00',
				],
			}
		},
		methods: {
			//送达时间 之前的时间不显示 三天后的时间
			init() {
				this.ytd = []
				let time = new Date().format("yyyy-MM-dd hh:mm:ss");
				for (let index = 1; index <= 2; index++) {
					let willTime = 0;
					let str = (index - 1) * 86400
					if (str == 0) {
						willTime = this.getTimestamp(time) / 1000

					} else {
						willTime = this.getTimestamp(time) / 1000
						willTime += str
					}
					this.ytd.push(this.getDateymd(willTime))
				};
				//默认选中 当前日期和时间段
				this.selectTime = this.ytd[0] + " "+ this.timeBucket[0]
			},
			openPopup() {
				this.$refs.popup.open()
				this.init()
			},
			closePopup() {
				this.$refs.popup.close()
			},
			confirm() {
				this.$emit("confrim", {
					time: this.selectTime
				})
			},
			cancel() {
				// let time = this.value[0] + ":" + this.value[1] + '0' + "-" + this.value[3] + ":" + this.value[4] + '0'
				this.$emit("cancel", {
					time: ''
				})
			},
			getime(e) {
				let val = e.detail.value
				console.log('val[0]', val[0])
				console.log('val[1]', val[1])
				let showTime = this.ytd[val[0]] + " " + this.timeBucket[val[1]]
				this.selectTime = showTime
			},
		}
	}
</script>
<style lang="scss">
	.time1 {
		width: 100%;
		// margin: 0 auto;
		background-color: #FFFFFF;
		// background-color: red;
		color: #000;
		height: 450rpx;
		position: relative;
		z-index: 999;

		.top {
			width: 640rpx;
			margin: 0 auto;
			height: 100rpx;
			line-height: 100rpx;

			text {
				font-weight: bold;

				&:nth-child(1) {
					font-size: 28rpx;
					color: #999;
				}

				&:nth-child(2) {
					font-size: 28rpx;
					color: #f8dc59;
				}
			}
		}

		.tip12 {
			width: 100%;
			height: 100rpx;

			view {
				width: 50%;
				text-align: center;
				line-height: 100rpx;
				font-size: 40rpx;
				color: #000000;
			}
		}

		.hours {
			font-size: 30rpx;
			font-weight: bold;
			color: #000;
		}

		.minutes {
			font-size: 30rpx;
			font-weight: bold;
			color: #000;
		}
	}

	.picker {
		width: 100%;
		height: 300rpx;
	}
</style>
